1 files changed, 111 insertions, 0 deletions
diff --git a/src/app/web-series/[id]/page.jsx b/src/app/web-series/[id]/page.jsx
new file mode 100644
index 0000000..63fcc3a
--- /dev/null
+++ b/src/app/web-series/[id]/page.jsx
@@ -0,0 +1,111 @@
+import Image from "next/image";
+import { SERIES_INFO, CREW_DETAILS } from "../components/data-fetch";
+import styles from "../styles/info.module.css";
+import { BiSolidUpvote } from "react-icons/bi";
+import { LiaStarSolid } from "react-icons/lia";
+import SeriesPlayer from "../components/videoPlayer";
+
+const SeriesInfoPage = async ({ params }) => {
+	const id = params.id;
+	const data = await FetchSeriesInfo(id);
+	const crew_data = await CREW_DETAILS(id);
+	return (
+		<main
+			style={{
+				// backgroundImage: `url(https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=https://image.tmdb.org/t/p/original${data.backdrop_path})`,
+				background: `linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 1) 100%), 
+                url(https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=https://image.tmdb.org/t/p/original${data.backdrop_path}) no-repeat center center fixed`,
+				backgroundSize: "cover",
+			}}
+			className={styles.Main}
+		>
+			<div className={styles.AnimeInfo}>
+				<section className={styles.AnimeInfoContainer}>
+					<div className={styles.TitleContainer}>
+						<Image
+							src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=https://image.tmdb.org/t/p/original${data.poster_path}`}
+							width={190}
+							height={290}
+							alt="Series Poster"
+							priority
+						/>
+						<section className={styles.SideTitleContainer}>
+							<h2 className={styles.title}>{data.name}</h2>
+							<p className={styles.secondTitle}>
+								{data.original_name}
+							</p>
+							<p className={styles.tagline}>
+								<span>{data.tagline || "not found"}</span>
+							</p>
+							<p className={styles.description}>
+								{" "}
+								{data.overview}
+							</p>
+							<hr />
+							<p className={styles.genres}>
+								Genres:{" "}
+								{data.genres.map((item, index) => (
+									<span key={index}>
+										{item.name}
+										{index !== data.genres.length - 1 &&
+											", "}
+									</span>
+								))}
+							</p>
+							<p className={styles.epiInfo}>
+								Seasons: <span>{data.number_of_seasons}</span>
+							</p>
+							<p className={styles.epiInfo}>
+								Episodes: <span>{data.number_of_episodes}</span>
+							</p>
+							<div className={styles.votes}>
+								<section className={styles.vote}>
+									<BiSolidUpvote color="var(--nord-green)" />{" "}
+									<p>{data.vote_count}</p>
+								</section>
+								<section className={styles.vote}>
+									<LiaStarSolid color="var(--nord-green)" />{" "}
+									<p>{data.vote_average}</p>
+								</section>
+							</div>
+						</section>
+					</div>
+					<section className={styles.CrewContainer}>
+						<h2>Crew</h2>
+						<div className={styles.CrewEntry}>
+							{crew_data &&
+								crew_data.cast.map((item, index) => (
+									<div
+										key={index}
+										className={styles.CastEntry}
+									>
+										<Image
+											src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=https://image.tmdb.org/t/p/original${item.profile_path}`}
+											width={140}
+											height={190}
+											alt="Crew Poster"
+										/>
+										<p>{item.name}</p>
+										<p style={{ fontSize: 11 }}>
+											{item.character}
+										</p>
+									</div>
+								))}
+						</div>
+					</section>
+
+					<section className={styles.VideoContainer}>
+						<SeriesPlayer id={data.id} />
+					</section>
+				</section>
+			</div>
+		</main>
+	);
+};
+
+const FetchSeriesInfo = async (id) => {
+	const data = SERIES_INFO(id);
+	return data;
+};
+
+export default SeriesInfoPage;